<template>
  <div class="pannel-container flex-column">
    <div class="pannel-title flex-between">
      <span class="t-name">用电统计</span>
      <div class="flex-box detail" @click="detailClick">
        <span>详情</span>
        <img src="../../assets/imgs/detail_icon.png" alt="">
      </div>
    </div>
    <time-tab  class="mt-10" :active.sync="activeTab"></time-tab>
    <div id="elec"></div>
  </div>
</template>
<script>
  import timeTab from '@/components/time-tab'
  import moment from 'moment'

  const colors = [
    {
      borderColor: '#0895E0',
      color: 'rgba(8,149,224,0.36)'
    },

    {
      borderColor: '#FFC8B7',
      color: 'rgba(255,200,183,0.36)'
    },

  ]


  export default {
    components:{
      timeTab
    },
    props:{
      largeScreenEnergyVOS:{
        type:Array,
        default:()=>[]
      },
      largeScreenEnergyByYearVOS:{
        type:Array,
        default:()=>[]
      },
    },
    name:'electricity',
    data(){
      return{
        chart: null,
        activeTab:'year',
        option: {
          backgroundColor: 'transparent',
          grid: {
            top: 90,
            right: 50,
            bottom: 45,
            left: 90,
          },
          legend:{
            right:30,
            top:30,
            textStyle:{
              color:'#fff',
              fontSize:32,
              fontWeight:'bold'
            },
            data:[]
          },
          tooltip: {
            trigger: 'axis',
            // formatter: function (series) {
            //   return `${series[0].data.name}:${series[0].data.value}`
            // },
            textStyle: {
              color: '#ffffff'
            },
            backgroundColor: 'rgba(0, 34, 81, 0.85)',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },
          xAxis: {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ECF0FF', //更改坐标轴文字颜色
                fontSize: 32, //更改坐标轴文字大小
                fontWeight:'bold'
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: 'rgba(119, 169, 185, 0.25)'
              }
            },
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: true,

            },
            axisLabel: {
              fontSize:32,
              fontWeight:'bold',
              margin: 20,
              show: true,
              color:'#ECF0FF'
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: 'rgba(119, 169, 185, 0.25)'
              },
            },
          },
          series: [

          ],
        },
      }
    },
    methods:{
      detailClick(){
        this.$emit('detailClick',{
          type:'energy'
        })
      },
      setOption(){
        let legend = [],xAxis = [],series = [];
        const vos = this.activeTab === 'year'?this.largeScreenEnergyByYearVOS:this.largeScreenEnergyVOS
        vos.forEach((o,i)=>{
          if(!legend.length){
            legend = o.deviceInfoVOs.map(d=>{
              return d.deviceName
            })
          }
          xAxis.push(moment(o.collectionDate).format(this.activeTab === 'year'?'MM月':'DD日'))
          if(!series.length){
            series = o.deviceInfoVOs.map((d,idx)=>{
              return{
                type:'bar',
                name:d.deviceName,
                data:[Number(d.dosage)],
                barWidth: 18,
                gapWidth:5,
                itemStyle : {
                  borderColor: colors[idx % 2].borderColor,
                  color: colors[idx % 2].color,
                }
              }
            })
          }else {
            o.deviceInfoVOs.forEach((d,i)=>{
              series[i].data.push(Number(d.dosage))
            })

          }
        })
        this.option.legend.data = legend;
        this.option.xAxis.data = xAxis;
        this.option.series = series;
        this.chart.setOption(this.option, true)
      },
      initChart () {
        this.chart = this.$echarts.init(
          document.getElementById(`elec`)
        )
        // this.chart.setOption(this.option, true)
      }
    },
    mounted () {
      this.initChart()
    },
    watch:{
      activeTab:{
        handler(newval){
          this.setOption()
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .pannel-container{
    width: 100%;
    background: url("../../assets/imgs/elec_bg.png");
    padding: 23px;
    .pannel-title {
      background: url("../../assets/imgs/elec_title.png") no-repeat;
    }
    #elec{
      flex: 1;
    }
  }
</style>
